 <!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div style="float: left; border: 1px solid red;">
        <form>
            <p>Gender: M<input id="genderM" type="radio" name="gender" value="M">
                    F<input id="genderF" type="radio" name="gender" value="F"></p>
            <p>Age:<input id="age" type="text" name="age" value=""></p>
            <p>Name:<input id="name" type="text" name="name" value=""></p>
            <p>Job:<input id="job" type="text" name="job" value=""></p>
            <p><input type="button" value="Update" onclick="updateProfile()"></p>
            <input type="reset" name="resetBtn"   
  value="Reset the form" />
                        
        </form>
             <script>
                var age = document.getElementById("age");
                var name = document.getElementById("name");
                var job = document.getElementById("job")
                var gender;
                if(document.getElementById("genderM").checked){
                    gender = document.getElementById("genderM").value
                }
                if(document.getElementById("genderF").checked){
                    gender = document.getElementById("genderF").value
                }
                else{
                    gender = "not declared"
                }

                function updateProfile() {
                    alert("gender: " + gender + "\n" 
                    + "age: " + age.value + "\n" + "name: " + name.value
                     + "\n" + "job: " + job.value);
                };
            </script>
        </div>
    </body>
</html>
